<template>
  <div class="pages" style="overflow: hidden">
<!--    <button class="goHomeMy" style="line-height: 33px;font-size: 37rpx;margin:0;height: 88rpx;position: fixed;top:0;left:3%;background: #1989fa" @click="goHome">返回首页</button>-->

<!--    <button open-type="share"  data-name="pageShare" class="shareBtn" style="margin-right:0;font-size: 37rpx" @click="onShareAppMessage" >-->
<!--      发送名片-->
<!--    </button>-->
    <div class="header">
      <img :src="headerImg" alt="">
      <p class="name" style="margin-top:10rpx;display: flex;justify-content: center;align-items: center;">
        <span >{{name}} </span>

        <img src="../../../static/images/vip.png" alt="" style="width: 32px;height: 32px"  v-if="isVip">
<!--        <van-icon name="gem-o" style="margin:0 10rpx" v-if="!isVip"/>-->
<!--        <van-icon name="gem-o" style="margin:0 10rpx"   v-if="isVip"/>-->

      </p>
      <p class="vip" >
        <a  @click="goPay">开通会员,享受至尊服务</a>
      </p>
<!--      <p class="vip"  v-if="isVip" style="margin: 20rpx auto;">-->
<!--        <a  style="margin-bottom: 20rpx">会员有效期至{{vipEndTime}}</a>-->
<!--&lt;!&ndash;        <van-button @click="goPay" color="linear-gradient(to right, #4bb0ff, #6149f6)"  type="info" >立即续费</van-button>&ndash;&gt;-->
<!--      </p>-->
<!--      <ul class="list">-->

<!--        <li @click="govacancy">-->
<!--          <p>{{money.validRestTotal}}</p>-->
<!--          <p>提成</p>-->
<!--        </li>-->

<!--      </ul>-->
    </div>
    <div class="weui-cells" style="margin-top: 55%;height:50%;overflow: auto">

      <div class="weui-cell weui-cell_access" @click="editCart">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">名片编辑</span>
        <!--  <span class="weui-badge" style="margin-left: 5px;">8</span> -->
        </div>
        <div class="weui-cell__ft"></div>
      </div>
<!--      <div class="weui-cell weui-cell_access" @click="createBranner">-->
<!--        <div class="weui-cell__bd">-->
<!--          <span style="vertical-align: middle">首页轮播</span>-->
<!--          &lt;!&ndash;  <span class="weui-badge" style="margin-left: 5px;">8</span> &ndash;&gt;-->
<!--        </div>-->
<!--        <div class="weui-cell__ft"></div>-->
<!--      </div>-->
      <div class="weui-cell weui-cell_access" @click="productUpload">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">产品上传</span>
        <!--  <span class="weui-badge" style="margin-left: 5px;">8</span> -->
        </div>
       <div class="weui-cell__ft"></div>
      </div>


      <div class="weui-cell weui-cell_access" @click="goCartList">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">增加名片</span>
          <span class="weui-badge" style="margin-left: 5px;">{{list.length}}</span>
          <!--  <span class="weui-badge" style="margin-left: 5px;">8</span> -->
        </div>
        <div class="weui-cell__ft"></div>
      </div>
      <div class="weui-cell weui-cell_access" @click="govacancy">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">我的提成</span>
          <!--  <span class="weui-badge" style="margin-left: 5px;">8</span> -->
        </div>
        <div class="weui-cell__ft"></div>
      </div>

<!--      <div class="weui-cell weui-cell_access" @click="message">-->
<!--        <div class="weui-cell__bd">-->
<!--          <span style="vertical-align: middle">名片发送格式</span>-->
<!--          &lt;!&ndash;  <span class="weui-badge" style="margin-left: 5px;">8</span> &ndash;&gt;-->
<!--        </div>-->
<!--        <div class="weui-cell__ft"></div>-->
<!--      </div>-->
<!--      <div class="weui-cell weui-cell_access" @click="noseSet">-->
<!--        <div class="weui-cell__bd">-->
<!--          <span style="vertical-align: middle">外连接设置</span>-->
<!--          &lt;!&ndash;  <span class="weui-badge" style="margin-left: 5px;">8</span> &ndash;&gt;-->
<!--        </div>-->
<!--        <div class="weui-cell__ft"></div>-->
<!--      </div>-->
      <div class="weui-cell weui-cell_access" @click="message">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">客服</span>
          <!--  <span class="weui-badge" style="margin-left: 5px;">8</span> -->
        </div>
        <div class="weui-cell__ft"></div>
      </div>
      <div class="weui-cell weui-cell_access" @click="userManual">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">使用手册</span>
          <!--  <span class="weui-badge" style="margin-left: 5px;">8</span> -->
        </div>
        <div class="weui-cell__ft"></div>
      </div>

    <!--  <div class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">单行列表</span>
          <span class="weui-badge" style="margin-left: 5px;">New</span>
        </div>
        <div class="weui-cell__ft"></div>
      </div> -->
      <van-dialog id="van-dialog" />
    </div>
<!--    <ul class="box" v-if="isOpen">-->

<!--      <li v-if="isShare">-->
<!--         <button open-type="share" data-name="pageShare" id="share" @click="onShareAppMessage">-->
<!--        <img src="../../../static/images/share1.png" alt="">-->
<!--        <p>分享</p>-->
<!--        </button>-->
<!--      </li>-->
<!--    </ul>-->
  </div>
</template>

<script>
  import Dialog from '../../../static/vant-weapp/dist/dialog/dialog'
export default{
    data () {
      return {
        data: {},
        headerImg:"",
        cartId:"",
        name:"",
        isOpen:true,
        isSc:false,
        isVip:false,
        vipEndTime:"",
        isShare:true,
          money:{},
          list:[]
      }
    },
  onPullDownRefresh(){
    this.getendTime();
    this.getListDetail()
    this.getMoney()
    this.getList();
    // wx.stopPullDownRefresh();
    // wx.hideLoading()

  },
    onShow () {
      wx.setNavigationBarTitle({
        title: '我的'
      })
      this.getendTime();
        this.getListDetail()
        this.getMoney()
        this.getList();

      let userInfo = JSON.parse(JSON.parse(wx.getStorageSync('userInfo')))
      if(userInfo){
        this.headerImg=userInfo.avatarUrl;
        this.name=userInfo.nickName;
      }else{
        this.headerImg='../../../static/images/header.png'
        this.name='';
      }

    //  console.log(userInfo)
      this.cartId = wx.getStorageSync('cartId')
    },
    mounted () {

    },
    // 分享
  onShareAppMessage () {

    let shareData= JSON.parse(wx.getStorageSync('shareData'))
    // let Authorization= wx.getStorageSync('Authorization')
    let shareType=wx.getStorageSync('shareType')
    let cartId=wx.getStorageSync('cartId')
    let userId= wx.getStorageSync('userId')
    let shareUrl=wx.getStorageSync('shareUrl')
    let that = this

    return {
      title:  `您好,我是${shareData.company}的${shareData.name},请惠存`, // 转发后 所显示的title
      path: `/pages/index/main?cartId=${cartId}&userId=${userId}&img=${shareData.logo}&isCartId=2`, // 相对的路径
      imageUrl:shareData.logo,
      success: (res) => { // 成功后要做的事情
        //console.log(res.shareTickets[0])
        // console.log

        wx.getShareInfo({
          shareTicket: res.shareTickets[0],
          success: (res) => {
            //console.log(res)
            //console.log(that.setData.isShow)
          },
          fail: function (res) { console.log(res) },
          complete: function (res) { console.log(res) }
        })
      },
      fail: function (res) {
        // 分享失败
        //  console.log('分享失败' + res)
      }
    }

  },

    methods: {
      userManual(){//使用手册
         wx.navigateTo({ url: "/pages/userManual/main"})
      },
      goHome(){
        wx.reLaunch({
          url: '/pages/index/main'
        })
      },
      getendTime(){
        let userId =  wx.getStorageSync('userId')
        this.$http.request({
          method: 'get',
          url: `/api/wxuser/getInfo`,
          body: {
            userId:userId
          }
        }).then((data)=>{
          if (data.code == 200) {
            wx.stopPullDownRefresh();
            wx.hideLoading()
            this.vipEndTime=data.data.vipEndTime.split(' ')[0];
            wx.setStorageSync('vipEndTime',this.vipEndTime)
          }
        })
      },
      goPay(){
         if(this.cartId){
            wx.navigateTo({ url: '/pages/pay/main'})
         }else{
           Dialog.confirm({
             title: '提示',
             message: '您还没有自己的名片,是否创建名片?'
           }).then(() => {
             wx.reLaunch({ url: '/pages/cardDetail/main' })
           }).catch(() => {

           });
         }

      },
        noseSet(){
          wx.navigateTo({ url: '/pages/nose/main'})
        },
        getList(){
          let userId =  wx.getStorageSync('userId')
            this.$http.request({
                method: 'get',
                url: `/api/card/list`,
                body: {
                  userId:userId
                }
            }).then((data) => {
                if (data.code == 200) {
                  wx.stopPullDownRefresh();
                  wx.hideLoading()
                    this.list = data.data;
                  //  console.log(this.list)
                } else {
                    // wx.showToast({
                    //     title: `${data.message}`,
                    //     icon: 'none',
                    //     duration: 2000
                    // })
                }
            }).catch((err) => {

            })
        },
        goCartList(){
           if(this.cartId){
              wx.navigateTo({ url: '/pages/cartList/main'})
           }else{
             Dialog.confirm({
               title: '提示',
               message: '您还没有自己的名片,是否创建名片?'
             }).then(() => {
               wx.reLaunch({ url: '/pages/cardDetail/main' })
             }).catch(() => {

             });
           }

        },
        getMoney(){
            let userId = wx.getStorageSync('userId')
            this.$http.request({
                method: 'get',
                url: `/api/incomeFlowing/incomeDetail/${userId}`,
                body: {}
            }).then((data)=>{
                if(data.code==200){
                 this.money=data.data;
                }
            })
        },
        govacancy(){
          if(this.cartId){
            wx.navigateTo({ url: '/pages/vacancy/main?money='+this.money.validRestTotal })
            }else{
              Dialog.confirm({
                title: '提示',
                message: '您还没有自己的名片,是否创建名片?'
              }).then(() => {
                wx.reLaunch({ url: '/pages/cardDetail/main' })
              }).catch(() => {

              });
            }
        },
      message () {
         if(this.cartId){
           wx.navigateTo({ url: '/pages/message/main' })
         }else{
           Dialog.confirm({
             title: '提示',
             message: '您还没有自己的名片,是否创建名片?'
           }).then(() => {
             wx.reLaunch({ url: '/pages/cardDetail/main' })
           }).catch(() => {

           });
         }

      },
      getListDetail () {
        let cartId = wx.getStorageSync('cartId')
        let userId= wx.getStorageSync('userId')
        this.$http.request({
          method: 'get',
          url: `/api/card/detail`,
          body: {
            cardId:cartId||'',
            userId:userId||''
          }
        }).then((data) => {
          if (data.code == 200) {
            wx.stopPullDownRefresh();
            wx.hideLoading()
            this.data = data.data;
            wx.setStorageSync('isVip',data.data.isVip);
            this.isVip=wx.getStorageSync('isVip')
          } else {
            // wx.showToast({
            //   title: `${data.message}`,
            //   icon: 'none',
            //   duration: 2000
            // })
          }
        }).catch((err) => {
          this.isCart = false
        })
      },
      editCart () {
        if(this.cartId){
          wx.setStorageSync('isEdit', 1)
          wx.navigateTo({ url: '/pages/createCard/main' })
        }else{
          Dialog.confirm({
            title: '提示',
            message: '您还没有自己的名片,是否创建名片?'
          }).then(() => {
            wx.reLaunch({ url: '/pages/cardDetail/main' })
          }).catch(() => {

          });
        }

      },

      productUpload () {
        if(this.cartId){
          // if (!this.data.isVip) {
          //   Dialog.confirm({
          //     title: '收费提示',
          //     message: '该功能需要开通VIP会员,是否继续?'
          //   }).then(() => {
          //     // on confirm
          //     wx.navigateTo({ url: '/pages/pay/main' })
          //   }).catch(() => {
          //     // on cancel
          //   })
          // } else {
            wx.navigateTo({ url: '/pages/createProduct/main'})
          // }
        }else{
          Dialog.confirm({
            title: '提示',
            message: '您还没有自己的名片,是否创建名片?'
          }).then(() => {
            wx.reLaunch({ url: '/pages/cardDetail/main' })
          }).catch(() => {

          });
        }


        // wx.navigateTo({ url: '/pages/createProduct/main' })
      },
      createBranner () {
        if(this.cartId){
          wx.navigateTo({ url: '/pages/createBanner/main' })
        }else{
          Dialog.confirm({
            title: '提示',
            message: '您还没有自己的名片,是否创建名片?'
          }).then(() => {
            wx.reLaunch({ url: '/pages/cardDetail/main' })
          }).catch(() => {

          });
        }

      }
    }
  }
</script>
<style>
  .name .van-icon-gem-o:before{
          color: #fff00;
  }
  .pagesMy .van-button__text{
    font-size: 37rpx;
  }
  .pagesMy .van-button--normal{
    padding: 0;
    font-size: 14px;

    width: 85px;
    height: 37px;

  }
  .header .van-button--normal{
    width: 100px;
    height: 30px;
    border-radius: 20px;
  }
</style>
<style scoped>
 .box{
   width: 74rpx;
   height:120rpx;
   background-color: #fff;
   border:1px solid rgb(61,176,243);
   /* border: 1px solid rgb(61,176,243); */
   border-radius: 30rpx;
   position: fixed;
   top:50%;
   right: 5%;
   font-size: 22rpx;
   /*display: flex;*/
   /*justify-content: center;*/
   /*align-content: center;*/
   /*flex-wrap: wrap;*/

   text-align: center;
   transform :translateY(-60rpx);
     }
     .box>li{
       width: 100%;
       height:57%;
       margin-top:22%;

     }
     #share{
       width: 100%;
       height: 100%;
       background-color: #fff;
       border:none;
       padding-left: 0;
       padding-right: 0;
       line-height: 30rpx;
       font-size: 24rpx;
       display: initial;
       box-sizing: border-box;
       padding:10rpx 0;
     }
     #share:after{
       border:none;
     }
     .box>li:first-child{
       /*margin-bottom: 10rpx;*/
     }
     .box img{
       width: 40rpx;
       height: 40rpx;
     }
     .goHomeMy{
       position: fixed;
       top:0;left: 3%;
       border:none;
       height: 64rpx;
       width: 200rpx;
       line-height:77rpx;
       font-size: 30rpx;
       display: initial;
       color: #fff;
       box-sizing: border-box;
       padding:10rpx 0;
       margin-left: 30rpx;
     }
 .shareBtn{
   background-color: #07c160;
   position: fixed;
   top:0;right: 3%;
   border:none;
   height: 88rpx;
   width: 200rpx;
   line-height:77rpx;
   font-size: 30rpx;
   display: initial;
   color: #fff;
   box-sizing: border-box;
   padding:10rpx 0;
   margin-left: 30rpx;
 }
 .shareBtn:after{
   border:none;
 }
  .header{
    position: fixed;
    top:3rpx;
    left:10%;
    width:80%;
    height:300rpx ;
    margin:0 auto;
    background: #fff;
    margin-top: 100rpx;
    font-size: 26rpx;
    padding: 35px 0 10px 0;
    box-sizing: border-box;
    border:1px solid #000;
    border-radius: 20rpx;
  }
  .vip{
    width:100%;
    font-size: 33rpx;
    margin:30rpx auto;
    text-align: center;
    color: #10AEFF;

  }
  .header>img{
    width: 150rpx;
    height: 150rpx;
    /*border-radius: 50%;*/
    position: absolute;
    top:-85rpx;
    left:50%;
    transform:translateX(-75rpx);

  }
  .list{
    width: 100%;
    height:200rpx;
    position: absolute;
    bottom:0;
    left: 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .list>li{
    width: 50%;
    height: 80rpx;
    box-sizing: border-box;
    border-top:1px solid #eee;
    border-right:1px solid #eee;
    text-align: center;
  }
  .list>li.moneyDetail{
    height: 113rpx;
    box-sizing: border-box;

       display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-top:none;
  }
 .list>li.moneyDetail>p{
   color: #aaa;
   width: 50%;
   text-align: left;
   box-sizing: border-box;
   padding-left: 30rpx;
 }

 .list>li:first-child{
   width: 100%;
 }
  .list>li>p:first-child{
    color: #aaa;
  }
  .list>li>p:last-child{
    color: #aaa;
  }
  .list>li:last-child{
    border-right: none;
  }
  .header>.name{
    text-align: center;

  }
 .header>.name>img{
   width: 32rpx;
   height: 32rpx;
 }
</style>
